import React, { useState } from "react";
import { MenuItem } from "../../components";
import bell from "../../assets/images/icon/hdpi/common_nav_message_black_n.png";
import leftArrow from "../../assets/images/icon/hdpi/common_icon_back_black_n.png";
import rightArrow from "../../assets/images/icon/hdpi/common_information_next_n.png";
import historyImage from "../../assets/images/icon/hdpi/my_icon_historical _inquiry_n.png";
import walletImage from "../../assets/images/icon/hdpi/my_icon_wallet_n.png";
import adviseImage from "../../assets/images/icon/hdpi/my_icon_recommendations_adopted_n.png";
import replyImage from "../../assets/images/icon/hdpi/my_icon_automatic_response_n.png";
import style from "./style.module.scss";
import { useNavigate } from "react-router-dom";

import { MyMack } from "../../components/myMack";
import { useAppSelector } from "../../store/hooks";
import { getDoctorById } from "../../api/my";
import { useRequest } from "ahooks";
import cup from "../../assets/images/image/hdpi/gift_cup.png";
interface MenuItemRawState {
  menuUrl: string;
  menuText: string;
  menuNavigate: string;
}
const Index: React.FC = () => {
  const navigate = useNavigate();

  // const imagePic = useAppSelector((state) => state.user.doctor.imagePic);

  const doctorId = useAppSelector((state) => state.user.doctor.doctorId);
  const sessionId = useAppSelector((state) => state.user.doctor.sessionId);

  const { data: imagePic = "" } = useRequest(async () => {
    const resp = await getDoctorById(doctorId, sessionId);
    return resp.result.imagePic;
  });

  const [menuList] = useState<MenuItemRawState[]>([
    {
      menuUrl: historyImage,
      menuText: "历史问诊",
      menuNavigate: "/consultation/historyconsultation",
    },
    {
      menuUrl: walletImage,
      menuText: "我的钱包",
      menuNavigate: "/my/wallet/mywallet",
    },
    {
      menuUrl: adviseImage,
      menuText: "被采纳建议",
      menuNavigate: "/my/adoptAdvice",
    },
    {
      menuUrl: replyImage,
      menuText: "设置自动回复",
      menuNavigate: "/my/autoAnswer",
    },
  ]);

  const [isFlag, setIsFlag] = useState(false);
  return (
    <div>
      <div className={style.wrapper}>
        <div className={style.header}>
          {/* 医生图片 */}

          <div className={style.doctorImage}>
            <img src={imagePic} alt="" onClick={() => setIsFlag(true)} />
          </div>
          <div>
            {/* 右铃铛 */}
            <img
              alt=""
              src={cup}
              className={style.bell}
              style={{  right: 50, width: 30, top: 35 }}
              onClick={() => navigate('/consultation/giftlist')}
            ></img>
            <img
              src={bell}
              alt=""
              className={style.bell}
              onClick={() => {
                navigate("/my/message");
              }}
            />
            {/* 左箭头 */}
            <img
              src={leftArrow}
              alt=""
              className={style.leftArrow}
              onClick={() => {
                navigate("/");
              }}
            />
            {/* 查看详情 */}
            <div
              className={style.ViewData}
              onClick={() => {
                navigate("/my/infomation/myProfile");
              }}
            >
              <span className={style.information}>查看资料</span>
              <img src={rightArrow} alt="" className={style.rightArrow} />
            </div>
          </div>
        </div>
        {/* 下方的四个图片 */}
        <div className={style.bottom}>
          {menuList.map((item, index) => {
            return (
              <MenuItem
                menuIndex={index}
                menuUrl={item.menuUrl}
                menuText={item.menuText}
                key={index}
                onNavigate={() => {
                  navigate(item.menuNavigate);
                }}
              ></MenuItem>
            );
          })}
        </div>
      </div>

      {isFlag && (
        <MyMack
          onCancel={() => setIsFlag(false)}
          type="switch"
          switchClick={() => navigate("/my/infomation/changeImage")}
        ></MyMack>
      )}
    </div>
  );
};

export default Index;
